<template>
	<div class="alert">
		<div class="alert-box">
			<div id="">
				<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
				<div class="bt">选择学生</div>
				<div class="search">
						<!--学生姓名：<el-input class="input" v-model="xsmc"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
						手机号：<el-input class="input" v-model="dh"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="primary" class="btn" size="mini" @click="getStudentList">搜索</el-button>
						<el-button type="primary" class="btn" size="mini" @click="cancel">返回</el-button>
				</div>
			</div>
            
		    <el-table
		        :data="dataList"
		        border
				stripe
				height="450"
				stripe
		        align="center"
		        class="admin-table"
		        style="margin-top: 20px;"
		        :row-class-name="'admin-table'"
		        @select="checkSelect"
		        @select-all="checkall">

		        <el-table-column
		            :prop="v.prop"
		            :label="v.label"
		            v-for="(v,index) in portTitleList"
		            align="center"
		            show-overflow-tooltip
		            v-if="v.hide != 0"
		            :align="v.align || 'center'"
		            :fixed="v.fixed"
		            :formatter="v.formatter"
		            :class-name="v.columnStyle"
		            :width="v.width"
		            :min-width="v.minWidth || '150'"
		            :header-align="v.headerAlign || 'center'"
		            >
		        </el-table-column>

		        <el-table-column
		            label="操作"
		            align="center"
		            fixed="right">
		            <template scope="scope">
		                <el-button size="small" type="text" @click="choose(scope.row)" v-for="v in portBntList">{{v.name}}</el-button>
		            </template>
		        </el-table-column>
		    </el-table>

		    <!-- 分页查询区域 -->
	        <!--<el-pagination
	            @size-change="handleSizeChange"
	            @current-change="handleCurrentChange"
	            :current-page.sync="pageindex"
	            :page-sizes="pagesizes"
	            :page-size="pagesize"
	            :layout="layout"
	            :total="total"
	            align="left"
	            class="class-page">
	        </el-pagination>-->
		</div>
	</div>
</template>

<script>

    import qs from 'qs'
    import Vue from 'vue'
    import { mapState } from 'vuex'
    import LoadingComponent from 'components/loading'
    import DeleteComponent from './del'

    export default {
    	props: ['params'],
        components: {
            LoadingComponent,
            DeleteComponent
        },
        data () {
            return {
                studentList: [],
                /*组件区域*/

                multipleDelNum:'', //获取批量选择的数据
                dataList: [],  //表格数据
								xsmc:'',
								dh:'',
                /*
                    prop :  接口参数名
                    label : 接口中文名
                    hide : 是否隐藏这一列
                    align : 这一列对齐顺序 ： left,right,center
                    headerAlign : 这一列表头对齐方式 ： left,right,center
                    formatter: function (row, column) {}
                */
                portTitleList: [
                   
                    {
                        prop:'zwm',
                        label:'中文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'ywm',
                        label:'英文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'xb',
                        label:'性别',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'dh',
                        label:'电话',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    }

                ],
                portBntList: [//接口按钮列表
                    {
                        name:'选取',
                        type:'choose'
                    }
                ],

                /*动画加载*/
                isLoading: true,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画

                /*模糊搜索条件*/
                inputbjmc:'' , //  班级名称,


                /*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
                pageindex: 1,//当前分页页码
                pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
                pagesize: 12,//每页显示条目数
                total: 0,//总条数


                dropDownData:'', //
            }
        },
        created () {
        	console.log(this.params,'09090')
        	this.xsmc = this.params.zwm
        	this.dh = this.params.dh
        	this.bjid = this.params.bjid
        	this.getStudentList()
            this.isLoading = true;//动画开始

        },
        mounted () {
            this.isLoading = false;//动画结束
        },
        methods: {
            tableRowClassName (row, index) {//隔行变色颜色设置
                /*if ( index%4 == 0) {
                    return "table-cell-green";
                }else if( index%4 == 1 ){
                    return "table-cell-yellow";
                }else if( index%4 == 2 ){
                    return "table-cell-red";
                }else{
                    return "table-cell-blue"
                }*/
            },
            tableCellControl (scope) {//表格单元格控制CSS样式
                /*if (scope.row.id == 112 && scope.column.property == "iname") {
                    return {
                        color:"red",
                    }
                }else{
                    return {
                        color:"green",
                    }
                }*/
            },

            choose (setting) {
            	console.log(setting)
            	this.$emit("close",{type:'student',cancel:false,data:setting})
            },
            cancel () {
               this.$emit('close',{type:'student',cancel:true})
            },

            getStudentList () {
							var logininfo = JSON.parse(localStorage.logininfo) ;//获取学校  用户id
							var params3 = qs.stringify({
								keyword:this.xsmc,
								dh:this.dh,
								bjid:this.bjid,
								yhid:logininfo.id,
								xxid:logininfo.xxid,
							});
            	this.axios.post(this.$store.state.api + 'xs/xscx', params3)
							.then( res => {
            		console.log(res)
            		this.dataList = res.data.data.list;
                this.total = res.data.data.totalPage;
            	}).catch( res => {
            		console.log(res)
            	})
            },

            handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.getStudentList();
            },

            handleCurrentChange (val) {//分页触发事件
                this.getStudentList();
            },

            checkSelect (selection, row) {//点击单选select触发事件
                console.log(selection, row)
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                // console.log(selection)
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            }

        }
    }
</script>


<style lang="less" scoped>
	.alert-box{
		width: 800px;
		height: 800px;
	}
	h2 {
		line-height: 30px;
		font-weight: 700;
	}
	.input {
			width:200px;
	}
	.bt {
		position: fixed;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 16px;
		padding-left: 15px;
	}
	.search{
		margin-top: 50px;
	}
</style>
